<template>
  <div class="page">
    <div class="banner">
      <div>
        <ul>
          <li @click="toPlain" style="background:url('https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/index/indexBanner_1.jpg') center no-repeat;">
            <div class="banner-text career">
              <div>
                <p class="text en">FUTURE</p>
                <p class="text en">DESIGN</p>
                <h2>什么是生涯规划？</h2>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="plan-wrap">
      <div class="plan">
        <div class="plan-choice">
          <!-- <nuxt-link to="/xuanke"> -->
          <nuxt-link to="/xuankecode">
            <img src="https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/index/xuanke_card.png">
            <div class="shadow">
              <button class="button button-clear button-energized detail-button">进入
                <span class="bold">></span>
              </button>
            </div>
          </nuxt-link>
          <!-- <nuxt-link to="/volunteer"> -->
          <nuxt-link to="/zhiyuan">
            <img src="https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/index/zhiyuan_card.png">
            <div class="shadow">
              <button class="button button-clear button-energized detail-button">进入
                <span class="bold">></span>
              </button>
            </div>
          </nuxt-link>
        </div>
        <div class="career-plan">
          <label class="title circle">生涯规划6步走</label>
          <div class="mySwiper">
            <div class="plan-content" ref="mySwiper2" v-swiper:mySwiper2="swiperOption2">
              <div class="swiper-wrapper">
                <div class="instruction swiper-slide" v-for="(item,index) in plainData" :key="index" @click="toStep(item.index)">
                  <div class="curStepNum">{{item.index}}</div>
                  <!-- <div class="pic" :style="'background: url('+item.imgUrl+') center no-repeat'"></div> -->
                  <div class="pic" :style="'background:url('+item.imgUrl+')  no-repeat;'">
                    <!-- <img :src="item.imgUrl" alt=""> -->
                  </div>
                  <div class="explain-wrap">
                    <label class="title">{{item.name}}</label>
                    <div class="explain">
                      <label class="explain-text">{{item.explainText}}</label>
                      <nuxt-link :to="'step?id='+(item.index)" class="button button-light energized detail-button">详情
                        <span class="bold">></span>
                      </nuxt-link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="step">
              <!-- @mouseenter="stepEnter(index)" -->
              <div v-for="(item,index) in plainData" :key="index" @mouseenter="stepEnter(index)" :class="index===(curStep-1)?'current-step ':' '">
                <label class="step-num">{{item.index}}</label>
                <a class="step-text">{{item.name}}</a>
                <label class="white-circle"></label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="banner1">
      <div class="fill1"></div>
      <div class="left-wrap">
        <div class="left-bg">
          <img src="https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/index/iPhone.png" alt="">
        </div>
      </div>
      <div class="right-wrap">
        <div class="right-content">
          <p><label class="title circle">知涯选科</label></p>
          <p>新高考轻松选科</p>
          <p class="code"><img src="" alt=""></p>
          <!-- <p class="code-intr">使用微信扫一扫打开小程序</p> -->
        </div>
      </div>
      <div class="fill2"></div>
    </div>
    <div class="video-wrap">
      <div class="say">
        <label class="title circle">他们怎么说</label>
      </div>
      <div class="say-content">
        <div class="userInfo">
          <p class="energized name">{{videoData.name}}</p>
          <p class="school">{{videoData.school}}<br />{{videoData.grade}}</p>
        </div>
        <div class="content">
          <div class="pre"></div>
          <p>{{videoData.content}}</p>
        </div>
        <div class="video">
          <video src="https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/videos/1.mp4" controls :muted="muted1" id="video1" @play="play('video1')"></video>
          <div class="video-column">
            <video src="https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/videos/2.mp4" controls :muted="muted2" id="video2" @play="play('video2')"></video>
            <video src="https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/videos/3.mp4" controls :muted="muted3" id="video3" @play="play('video3')"></video>
          </div>
        </div>
      </div>
    </div>
    <div class="hot-answer">
      <div class="answer-wrap">
        <div class="answer">
          <label class="title circle">热门问题</label>
        </div>
        <div class="answer-content">
          <div class="answer-row">
            <div class="ceil" v-for="(item,index) in answerData" :key="index">
              <!-- <nuxt-link to="topic" @click.native="toTopic(item)">  :href="'topic?id='+item.index" -->
              <a @click="toTopic(item)">
                <div class="answer-text">
                  <p class="q-title">Q{{index+1}}</p>
                  <p class="answer-title">{{item.title}}</p>
                  <p class="stable readNum">阅读：{{item.readNum}}次</p>
                  <p class="bold answer-button">
                    <label class="detail-text">详情</label>
                    <label class="left-bracket">></label>
                  </p>
                </div>
              </a>
              <!-- </nuxt-link> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <top-btn></top-btn>
  </div>
</template>

<script>
import Vue from 'vue'
if (process.browser) {
  const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr')
  Vue.use(VueAwesomeSwiper)
}
export default {
  data () {
    return {
      checkList: ['选中且禁用', '复选框 A'],

      curStep: 0,
      plainData: [{
        index: 1,
        name: '认识自己',
        isActive: true,
        explainText: '探究清楚自己的能力、兴趣与价值观',
        imgUrl: 'https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/index/step_1.jpg'
      }, {
        index: 2,
        name: '外部探索',
        isActive: false,
        explainText: '了解自己所处的家庭、学校和社会',
        imgUrl: 'https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/index/step_2.jpg'
      }, {
        index: 3,
        name: '知情选择',
        isActive: false,
        explainText: '综合各种信息，做出明晰的路径规划',
        imgUrl: 'https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/index/step_3.jpg'
      }, {
        index: 4,
        name: '订立计划',
        isActive: false,
        explainText: '制定计划，一步一步规划自己的生涯路径',
        imgUrl: 'https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/index/step_4.jpg'
      }, {
        index: 5,
        name: '实践计划',
        isActive: false,
        explainText: '按照计划，一步一个脚印，不断实践目标',
        imgUrl: 'https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/index/step_5.jpg'
      }, {
        index: 6,
        name: '反馈调整',
        isActive: false,
        explainText: '根据实际情况，调整自己的计划',
        imgUrl: 'https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/index/step_6.jpg'
      }],
      bannerList: [{
        imgUrl: 'https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/index/indexBanner_1.jpg',
        en: `FUTURE
        DESIGN`,
        title: '什么是生涯规划？',
        span: '',
        span2: '',
        href: 'plain'
      }],
      answerData: [{
        title: '什么是位次？',
        readNum: 376,
        index: 0
      }, {
        title: '什么是退档？',
        readNum: 584,
        index: 1
      }, {
        title: '什么是平行志愿？',
        readNum: 154,
        index: 2
      }, {
        title: '新高考改革改了些什么？',
        readNum: 985,
        index: 3
      }, {
        title: '什么是自主招生？',
        readNum: 294,
        index: 4
      }],
      videoData: {
        name: '王文颖',
        school: '西安交通大学',
        grade: '大一',
        content: `大家好，我是来自四川省的一名文科生，我叫(王文颖)，当初报考时，我使用了知涯志愿APP，最终被西安交通大学录取了，我觉得，这个APP给我最大的帮助是：它会根据我的分数、兴趣爱好、专业的发展，迅速帮我制定志愿表，APP的内容很清晰，还有录取概率的分析，给我报考学校增加了信心。最后，强烈建议学弟、学妹们没必要花几千块钱请专家一对一分析，我觉得只要一个知涯志愿APP就行了。`
      },
      muted1: true,
      muted2: true,
      muted3: true,
      swiperOption2: {
        notNextTick: true,
        autoplay: {
          disableOnInteraction: false
        },
        loop: true,
        speed: 1500,
        effect: 'fade',
        autoplayDisableOnInteraction: false,
        // direction: 'vertical',
        on: {
          transitionStart: () => {
            if (this.$refs['mySwiper2'].swiper.activeIndex > 6) {
              this.curStep = 1
            } else {
              this.curStep = this.$refs['mySwiper2'].swiper.activeIndex
            }
          }
        }
      }
    }
  },
  methods: {
    toStep (index) {
      this.$router.push({
        path: 'step',
        query: {
          id: index
        }
      })
    },
    toPlain () {
      this.$router.push({ path: 'plain' })
    },
    stepChange (index) {
      let plainData = this.plainData
      for (let i = 0; i < plainData.length; i++) {
        if (index === i) {
          plainData[i].isActive = true
          this.curStep = i
        } else {
          plainData[i].isActive = false
        }
      }
      return this.curStep
    },
    /* 跳转到热门问题页面 */
    toTopic (item) {
      this.$router.push({
        path: 'topic',
        query: {
          id: item.index + 1
        }
      })
      let randomNum = Math.floor(Math.random() * 10 + 1)
      let readNum = item.readNum + randomNum
      setTimeout(() => {
        item.readNum = readNum
        localStorage.setItem('answerData', JSON.stringify(this.answerData))
      }, 1000)
    },
    changeStep () {
      let stepLen = this.plainData.length
      if (this.curStep === stepLen - 1) {
        this.curStep = 0
      } else {
        ++this.curStep
      }
      this.stepChange(this.curStep)
    },
    /* 视频播放事件 */
    play (type) {
      switch (type) {
        case 'video1':
          this.videoData = {
            name: '王文颖',
            school: '西安交通大学',
            grade: '大二',
            content: `大家好，我是来自四川省的一名文科生，我叫(王文颖)，当初报考时，我使用了知涯志愿APP，最终被西安交通大学录取了，我觉得，这个APP给我最大的帮助是：它会根据我的分数、兴趣爱好、专业的发展，迅速帮我制定志愿表，APP的内容很清晰，还有录取概率的分析，给我报考学校增加了信心。最后，强烈建议学弟、学妹们没必要花几千块钱请专家一对一分析，我觉得只要一个知涯志愿APP就行了。`
          }
          this.muted1 = false
          this.muted2 = true
          this.muted3 = true
          document.getElementById('video2').pause()
          document.getElementById('video3').pause()
          document.getElementById('video2').currentTime = 0
          document.getElementById('video3').currentTime = 0
          break
        case 'video2':
          this.videoData = {
            name: '卢小玲',
            school: '四川大学',
            grade: '大一',
            content: `大家好，我是来自湖南的一名理科生，我叫（卢小玲），是18年毕业的高考生，今年我考上了四川大学，当初报考的时候，用了知涯志愿这款软件，根据软件的意见，我报考了这所大学，被顺利录取，我觉得知涯志愿给我最大的帮助就是让我能有很清晰的定位，我也向学弟、学妹们推荐这款软件，可以有很大的帮助。`
          }
          this.muted1 = true
          this.muted2 = false
          this.muted3 = true
          document.getElementById('video1').pause()
          document.getElementById('video3').pause()
          document.getElementById('video1').currentTime = 0
          document.getElementById('video3').currentTime = 0
          break
        case 'video3':
          this.videoData = {
            name: '钟孝依',
            school: '天津工业大学',
            grade: '大一',
            content: `大家好，我是来自湖南省的（钟孝依），是2018届的高中毕业生，今年我考上了天津工业大学，当初报考的时候我使用了知涯志愿，在填志愿时，知涯志愿给了我很大的信心，我成绩刚上一本，觉得比较危险，本来不打算填一本学校的，但知涯志愿根据我的分数，给我提供了几所录取概率比较大的一本学校，我就选了其中概率最大的那一所，结果真的就被录取了。`
          }
          this.muted1 = true
          this.muted2 = true
          this.muted3 = false
          document.getElementById('video1').pause()
          document.getElementById('video2').pause()
          document.getElementById('video2').currentTime = 0
          document.getElementById('video1').currentTime = 0
          break
      }
      return this.videoData
    },
    /* 生涯规划六步走鼠标移入事件 */
    stepEnter (index) {
      this.curStep = index + 1
      this.mySwiper2.slideTo(this.curStep)
    }
  },
  mounted () {
    let answerData = JSON.parse(localStorage.getItem('answerData'))
    if (answerData != null) {
      this.answerData = answerData
    }
  }
}
</script>

<style scoped lang="scss">
.page {
  margin-top: 50px;
  min-width: 1200px;
  overflow: hidden;
}
.banner {
  min-width: 1200px;
  li {
    position: relative;
    background-size: cover !important;
    height: 500px;
    &:hover {
      cursor: pointer;
    }
    .banner-text {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      color: $light;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .title {
        display: flex;
        flex-direction: column;
      }
      .en {
        color: $light;
        font-weight: bold;
        font-size: 62px;
      }
      h2 {
        font-size: 48px;
        font-weight: normal;
      }
    }
    .career {
      margin-left: 100px;
      > div {
        display: flex;
        flex-direction: column;
        text-align: left;
        > div {
          margin-top: 10px;
        }
      }
    }
    .make-career {
      margin-right: 500px;
      > div {
        display: flex;
        flex-direction: column;
        text-align: right;
        > div {
          margin-top: 10px;
        }
      }
    }
  }
  /deep/ .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
  }
  /deep/ .swiper-pagination-bullet-active {
    background-color: #fff !important;
  }
}
.plan-wrap {
  width: 1200px;
  margin: 0 auto;
  // padding: 0 220px;
  .plan {
    position: relative;
    padding-top: 70px;
    padding-bottom: 100px;
    &:after {
      content: "";
      position: absolute;
      height: 100%;
      width: 10px;
      background: #f6f6f6;
      top: 0;
      right: 35px;
      z-index: 0;
    }
  }
  .career-plan {
    position: relative;
    z-index: 1;
    .title {
      margin: 0 30px;
      display: inline-block;
    }
  }
  .plan-choice {
    display: flex;
    justify-content: space-between;
    margin-bottom: 85px;
    position: relative;
    z-index: 1;
    a {
      display: block;
      width: 550px;
      overflow: hidden;
      position: relative;
      .shadow {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0;
        background-color: rgba(0, 0, 0, 0.5);
        box-shadow: 0px 12px 64px rgba(0, 0, 0, 0.1);
        transition: all linear 0.3s;
        .detail-button {
          border: 1px solid #fff;
          position: absolute;
          bottom: 23px;
          right: 33px;
          opacity: 0;
          transition: opacity linear 0.3s;
          &:hover {
            background-color: transparent;
          }
        }
      }
      &:hover {
        .shadow {
          opacity: 1;
          .detail-button {
            opacity: 1;
          }
        }
        img {
          transform: scale3d(1.1, 1.1, 1.1);
        }
      }
      img {
        display: block;
        width: 100%;
        transition: transform linear 0.3s;
      }
    }
    .left {
      margin-left: -100px;
      background: url("https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/index/group_1.png") no-repeat center;
    }
    .right {
      margin-left: 100px;
      margin-right: -100px;
      background: url("https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/index/group_2.png") no-repeat center;
    }
  }
  .mySwiper {
    display: flex;
    justify-content: space-between;
    margin: 129px 30px 0 30px;
    padding-left: 50px;
    /deep/ .swiper-container {
      overflow: inherit;
      margin: 0;
    }
    .swiper-wrapper {
      .swiper-slide {
        > div {
          display: none;
        }
      }
      .swiper-slide-active {
        > div {
          display: block;
        }
      }
    }
  }
  .plan-content {
    height: 530px;
    // flex: 1;
    width: 820px;
    .instruction {
      // box-shadow: 0px 12px 64px rgba(0, 0, 0, 0.1);
      position: relative;
      &:hover {
        cursor: pointer;
      }
      .curStepNum {
        position: absolute;
        left: -10px;
        top: -155px;
        color: #6EC9CA;
        font-size: 288px;
        transition: all ease 0.5s;
      }
      .pic {
        background-size: cover !important;
        background-color: $stable !important;
        height: 352px;
      }
      .explain-wrap {
        background-color: $energized;
        // background-color: #6ec9ca;
        color: $light;
        padding: 24px 49px 33px 27px;
        .title {
          margin: 0 0 18px;
          color: $light !important;
        }
        .explain {
          display: flex;
          justify-content: space-between;
          .explain-text {
            font-size: 24px;
            flex: 1;
          }
        }
      }
    }
  }
  .step {
    text-align: right;
    flex: 1;
    > div {
      position: relative;
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      &:not(:first-child) {
        margin-top: 20px;
      }
      .step-num {
        font-size: 64px;
        color: #f6f6f6;
        margin-right: -20px;
        margin-bottom: -20px;
      }
      .step-text {
        color: #5c5c5c;
        font-size: $size16;
        transition: all linear 0.3s;
      }
      .white-circle {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background: #f6f6f6;
        border: 5px solid #f6f6f6;
        transition: all linear 0.3s;
        margin-left: 10px;
      }
      &:hover {
        transform: scaleY(1);
      }
    }
    .current-step {
      cursor: pointer;
      height: 70px;
      align-items: center;
      .step-num {
        display: none;
      }
      .step-text {
        font-size: 36px;
        color: #6EC9CA;
        // margin-right: 3px;
      }
      .white-circle {
        width: 29px;
        height: 29px;
        background: transparent;
        border: 8px #6EC9CA solid;
        margin-right: -5px;
      }
    }
  }
}
.banner1 {
  height: 723px;
  min-width: 1200px;
  background-color: #f6f6f6;
  display: flex;
  justify-content: center;
  position: relative;
  > .left-wrap {
    width: 330px;
    display: flex;
    align-items: flex-end;
    text-align: right;
    > .left-bg {
      margin: 40px 0;
    }
  }
  > .right-wrap {
    width: 200px;
    margin-left: 200px;
    margin-right: 100px;
    text-align: right;
    .right-content {
      display: flex;
      flex-direction: column;
      padding-top: 100px;
      // color: #fff;
      font-size: 18px;
      .circle {
        position: relative;
        // color: #fff;
        margin-bottom: 10px;
        &::after {
          left: -5px;
          top: -5px;
          border: 7px $energized solid;
        }
      }
      .code {
        margin: 50px 0 10px;
        img {
          width: 200px;
          height: 228px;
          background: url("https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/index/xuanke.jpg") no-repeat right;
          background-size: cover;
          display: inline-block;
        }
      }
      .code-intr {
        font-size: 14px;
      }
    }
  }
  > .fill1 {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 180px;
    background: url("https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/index/left.png") no-repeat center;
    background-size: contain;
  }
  > .fill2 {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 280px;
    background: url("https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/index/right.png") no-repeat center;
    background-size: contain;
  }
}
.video-wrap {
  height: 782px;
  width: 1200px;
  margin: 0 auto;
  padding: 88px 0;
  .say-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .userInfo {
      width: 145px;
      .name {
        font-size: 36px;
      }
      .school {
        font-size: 24px;
        margin-top: 25px;
      }
    }
    .content {
      // width: 210px;
      color: #b8b8b8;
      margin: 0 20px;
      flex: 1;
      text-align: justify;
      position: relative;
      .pre {
        position: absolute;
        background: url("https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/index/pre.png") no-repeat;
        background-size: 100% 100%;
        top: -30px;
        left: 5px;
        height: 60px;
        width: 60px;
        z-index: -100;
      }
      > p {
        font-size: 12px;
      }
    }
    .video {
      display: flex;
      flex-direction: column;
      width: 400px;
      > video {
        height: 258px;
        width: 100%;
        &:hover {
          cursor: pointer;
          transition: all ease 0.35s;
        }
      }
      .video-column {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        > video {
          // width: 180px;
          height: 285px;
        }
      }
    }
  }
}
.hot-answer {
  height: 657px;
  background: #f6f6f6;
  .answer-wrap {
    padding: 80px 0;
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    .answer-row {
      width: 100%;
      margin-top: 34px;
      display: flex;
      flex-wrap: wrap;
      .ceil {
        padding: 30px 20px;
        width: 31%;
        height: 188px;
        display: inline-block;
        font-size: $size16;
        transition: box-shadow 0.6s ease 0s;
        position: relative;
        .q-title {
          font-size: $size16;
        }
        .answer-title {
          margin-top: 12px;
          font-size: 24px;
        }
        .readNum {
          font-size: 12px;
          margin: 5px 0 10px;
        }
        .answer-text {
          transition: all ease 0.5s;
          .answer-button{
            display: inline-block;
            position: relative;
            border-radius: 20px;
            width: 74px;
            height: 25px;
            line-height: 25px;
            overflow: hidden;
            text-align: center;
            transition: background-color ease .2s .1s;
            >label:hover{
              cursor: pointer;
            }
            .left-bracket {
              position: absolute;
              top: 0;
              left: 0;
              transition: left ease .5s,color ease-in .05s .2s;
            }
            .detail-text {
              opacity: 0;
              width: 0;
              height: 0;
              margin-right: 17px;
              display: block;
              overflow: hidden;
              transition: opacity ease .2s .4s;
            }
          }
        }
        &:nth-child(3n-1) {
          margin: 0 3.5%;
        }
        &:hover {
          cursor: pointer;
          box-shadow: 0px 12px 64px rgba(0, 0, 0, 0.1);
          background-size: 50% 100%;
          background: url("https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/index/answer.png") no-repeat 100% 0;
          .answer-text {
            padding-left: 10px;
            .answer-button{
              background-color: $positive;
              color: #fff;
              .detail-text{
                opacity: 1;
                width: auto;
                display: inline-block;
                height: auto;
              }
              .left-bracket{
                color: $light;
                left: 50px;
              }
            }
          }
          .answer-title {
            color: $positive;
          }
        }
      }
    }
  }
  .circle::after {
    border: 7px $energized solid;
  }
}
.title {
  font-size: 48px;
  color: #4f5359;
}
.detail-button {
  border-radius: 20px;
  border: none;
  width: 94px;
  height: 32px;
  margin-left: 20px;
  text-align: center;
}
.circle {
  position: relative;
  z-index: 2;
  &::after {
    content: "";
    position: absolute;
    right: -11px;
    bottom: -2px;
    border-radius: 50%;
    width: 25px;
    z-index: -1;
    height: 25px;
    background: transparent;
    border: 7px $energized solid;
  }
}
</style>
